﻿<template>
  <overlay
    z-index="999999"
    class-name="overlayClass"
    :show="show"
  >
    <div class="loading-indicator">
      <div class="loading-item"></div>
      <div class="loading-item"></div>
      <div class="loading-item"></div>
    </div>
  </overlay>
</template>
<script>
import { Overlay } from 'vant'

export default {
  name: 'Loading',
  components: {
    Overlay
  },
  props: {
    show: {
      type: Boolean
    }
  },
  data () {
    return {

    }
  },
  computed: {
  },
  mounted () {
     
  }
}
</script>
<style lang="less" scoped>
.overlayClass {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
  }

  .loading-indicator {
    margin-top: 0.2rem;

    .loading-item {
      display: inline-block;
      width: 0.15rem;
      height: 0.18rem;
      background-size: 100% 100%;
      -webkit-animation: loadingScaleColorBoth 0.5s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
      animation: loadingScaleColorBoth 0.5s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;

      &:nth-child(1) {
        -webkit-animation-delay: -1.7s;
        animation-delay: -1.7s;
      }

      &:nth-child(2) {
        -webkit-animation-delay: -1.4s;
        animation-delay: -1.4s;
      }

      &:nth-child(3) {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
    }
  }

  @keyframes loadingScaleColorBoth {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0;
    }

    35% {
      -webkit-transform: scale(0.12);
      transform: scale(0.12);
      opacity: 0.001;
    }

    to {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
